<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
    <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        
        <title>Diverso | Just another YIW Themes Demo Sites site</title>
        
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 960px)" href="css/lessthen800.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="css/lessthen600.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="css/lessthen480.css" />
                                   
        <!-- CUSTOM STYLE -->                                                                        
        <link rel="stylesheet" type="text/css" media="all" href="css/custom-style.css" />
        
        <!-- [favicon] begin -->
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <!-- [favicon] end -->  
        
        <!-- MAIN FONT STYLE -->  
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz%3A400&amp;subset=latin%2Ccyrillic%2Cgreek" type="text/css" media="all" />      
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans" type="text/css" media="all" />     
	    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald" type="text/css" media="all" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz%3A200%2C400" type="text/css" media="all" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed%3A300%7CPlayfair+Display%3A400italic" type="text/css" media="all" />
        <!-- END MAIN FONT STYLE -->  
        
        <link rel="stylesheet" id="prettyPhoto-css" href="css/prettyPhoto.css" type="text/css" media="all" />
        <link rel="stylesheet" id="jquery-tipsy-css" href="css/tipsy.css" type="text/css" media="all" />
        
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/jquery.tipsy.js"></script>
        <script type="text/javascript" src="js/jquery.tweetable.js"></script>        
        <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>  
        <script type="text/javascript" src="js/jquery.flexslider.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.min.js"></script>  
        
        <!-- for accordion slider in staff page -->
        <script type="text/javascript" src="js/jquery.hrzAccordion.js"></script>  
        
        <!-- for filterable effect in gallery and portfolio filterable page -->
        <script type="text/javascript" src="js/jquery.quicksand.js"></script>  
        
        <!-- for portfolio slider -->
        <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script> 
        
        <!-- for the contact page -->
        <script type="text/javascript" src="js/contact.js"></script>  
        
        <!-- SLIDER ELASTIC -->                                                               
        <link rel="stylesheet" id="slider-elastic-css" href="css/slider-elastic.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        
        <!-- SLIDER CYCLE -->                                                               
        <link rel="stylesheet" id="slider-cycle-css" href="css/slider-cycle.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.slides.min.js"></script>
        
        <!-- SLIDER THUMBNAILS -->                                                               
        <link rel="stylesheet" id="slider-thumbnails-css" href="css/slider-thumbnails.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
        
        <!-- SLIDER FLASH -->                                                               
        <script type="text/javascript" src="js/swfobject.js"></script>      
        
        <!-- SLIDER ELEGANT -->                                                               
        <link rel="stylesheet" id="slider-elegant-css" href="css/slider-elegant.css" type="text/css" media="all" />
        
        <!-- SLIDER NIVO -->                                                               
        <link rel="stylesheet" id="slider-nivo-css" href="css/slider-nivo.css" type="text/css" media="all" />     
        
        <!-- CUSTOM JAVASCRIPT -->                           
        <script type="text/javascript" src="js/jquery.custom.js"></script>
    </head>
    
    <body class="home image-sphere-style responsive">
    
        <!-- START SHADOW WRAPPER -->
        <div class="shadowBg group">
            
            <!-- START WRAPPER -->
            <div class="wrapper group">
                
                <!-- START TOPBAR -->
                <div id="topbar">
                    <div class="inner">
                        <ul class="topbar_links">
                            <li>
                                <a href="#">Login</a>  
                            </li>
                            <li> | <a href="contact.html">Contact Us</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <!-- end.inner -->
                </div>
                <!-- END TOPBAR -->   
                 
                <!-- START HEADER -->
                <div id="header" class="group">
                
                    <!-- START LOGO -->
                    <div id="logo" class="group">
                        <a href="index.html" title="Diverso"> 
                        <img src="images/logo.png" alt="Logo Diverso" />
                        </a>              
                    </div>
                    <!-- END LOGO -->   
                    
                    <!-- START NAV -->
                    <div id="nav" class="group">
                        <ul class="level-1 white">
                            <li class="home">
                                <a href="index.html">HOME</a>
                                <ul class="sub-menu">
                                    <li><a href="home-version-2.html">HOME VERSION 2</a></li>
                                    <li><a href="home-version-3.html">HOME VERSION 3</a></li>
                                    <li><a href="home-version-4.html">HOME VERSION 4</a></li>
                                    <li><a href="home-version-5.html">HOME VERSION 5</a></li>
                                    <li><a href="home-version-6.html">HOME VERSION 6</a></li>
                                </ul>
                            </li>
                            <li class="folder">
                                <a href="#">Pages</a>
                                <ul class="sub-menu">
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="testimonials.html">Testimonials</a></li>
                                    <li><a href="staff.html">Staff</a></li>
                                    <li><a href="gallery.html">Gallery</a></li>
                                    <li><a href="archives.html">Archives</a></li>
                                </ul>
                            </li>
                            <li class="bookmark">
                                <a href="#">Portfolio</a>
                                <ul class="sub-menu">
                                    <li><a href="portfolio-3-columns.html">3 Columns</a></li>
                                    <li><a href="portfolio-with-slider.html">With Slider</a></li>
                                    <li><a href="portfolio-big-image.html">Big Image</a></li>
                                    <li><a href="portfolio-full-description.html">Full Description</a></li>
                                    <li><a href="portfolio-filterable.html">Filterable</a></li>
                                </ul>
                            </li>
                            <li class="burst">
                                <a href="#">Shortcodes</a>
                                <ul class="sub-menu">
                                    <li><a href="shortcode-nivo-slider.html">Nivo Slider</a></li>
                                    <li><a href="shortcode-media-widgets.html">Media &#038; Widgets</a></li>
                                    <li><a href="shortcode-alert-box-buttons.html">Alert box &#038; buttons</a></li>
                                    <li><a href="shortcode-icon-sections.html">Icon Sections</a></li>
                                    <li><a href="shortcode-table-box-prices.html">Table &#038; Box prices</a></li>
                                    <li><a href="shortcode-typography.html">Typography</a></li>
                                    <li><a href="shortcode-mix-various.html">Mix &#038; Various</a></li>
                                </ul>
                            </li>
                            <li class="calendar">
                                <a href="blog.html">Blog</a>
                                <ul class="sub-menu">
                                    <li><a href="blog-small-image.html">Small Image</a></li>
                                    <li><a href="blog-big-image.html">Big image</a></li>
                                </ul>
                            </li>
                            <li class="email"><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    <!-- END NAV -->   
                </div>
                <!-- END HEADER -->        
        
                <!-- START SLIDER -->
                <div id="slider" class="cycle group">
                    <div class="slides_container">
                        
                        <!-- START PANEL -->
                        <div class="first slide align-center image-content-type">
                            <!-- HENTRY -->
                            <div class="hentry">
                                <h2>We want do <br /> something <span>of different</span>.</h2>
                            </div>
                            <!-- END HENTRY -->
                            <!-- IMAGE / VIDEO -->
                            <div class="featured-image"><img src="images/slider/cycle/slide16.png" width="802" height="276" alt="We want do  something of different." /></div>
                            <!-- END IMAGE / VIDEO -->
                            <div class="clear"></div>
                        </div>
                        <!-- END PANEL -->
                        
                        <!-- START PANEL -->
                        <div class="slide align-left image-content-type">
                            <!-- HENTRY -->
                            <div class="hentry">
                                <h2>Another amazing theme</h2>
                                <p>
                                <p>Nullam suscipit tincidunt gravida. Aliquam erat ligula, auctor ut pretium eget, volutpat a diam. Sed tincidunt, magna sed suscipit condimentum, turpis nunc cursus erat, ac lobortis <a href="#">dui sem a sapien. </a>Pellentesque a enim sapien, ac rutrum massa. </p>
                                <p>Nulla facilisi. Mauris id nibh augue. Phasellus ultricies convallis hendrerit. <strong>Etiam rutrum tempus</strong> faucibus. </p>
                                </p>   
                            </div>
                            <!-- END HENTRY -->
                            <!-- IMAGE / VIDEO -->
                            <div class="featured-image"><img src="images/slider/cycle/0026.png" width="603" height="273" alt="Another amazing theme" /></div>
                            <!-- END IMAGE / VIDEO -->
                            <div class="clear"></div>
                        </div>
                        <!-- END PANEL -->
                        
                        <!-- START PANEL -->
                        <div class="last slide align-right video-content-type">
                            <!-- HENTRY -->
                            <div class="hentry">
                                <h2>Also a video in your slider</h2>
                                <p>
                                <p>Praesent pretium accumsan nunc a aliquet. Vivamus est est, suscipit nec accumsan vel, <strong>tincidunt at nulla</strong>. Vestibulum posuere dictum risus, in pharetra magna rhoncus vel. Aliquam eleifend rhoncus dui, sit amet consequat <a href="#">mauris porttitor</a> eu. </p>
                                </p>   
                            </div>
                            <!-- END HENTRY -->
                            <!-- IMAGE / VIDEO -->
                            <div class="video-container">
                                <!-- change the ID of this class to change the video -->
                                <!-- leave this format: video-VIDEOSOURCE-IDVIDEO -->
                                <!-- for example the video is: http://www.youtube.com/watch?v=hyMqnJc1z9E -->
                                <!-- the new class will be: video-youtube-hyMqnJc1z9E -->
                                <div id="video-vimeo-30507832"></div>
                            </div>
                            <!-- END IMAGE / VIDEO -->
                            <div class="clear"></div>
                        </div>
                        <!-- END PANEL -->
                        
                    </div>
                    <div class="shadow"></div>
                </div>                 
                
                <!-- JS SCRIPT --> 
                <script type="text/javascript">  
                    // edit here
                    var 	slider_cycle_fx = 'slide',
                            slider_cycle_speed = 400,
                            slider_cycle_timeout = 5000,
                            slider_cycle_autoplay = true; 
                    // end editing    
                            
            		$('#slider.cycle').css({ display : 'block' });
            		$('#slider.cycle .slide').css({ width : $('#slider.cycle').width() });
            		
                    slider_cycle_timeout = slider_cycle_autoplay ? slider_cycle_timeout : 0;
                    
                    var adjust_height = function (current) { 
                        var total = $('#slider .slides_control').children().size();
                        var next = current + 1;
                        // if last slide, set next to first slide
        				next = total === next ? 0 : next;
                        
                        var nextSlide = $('#slider .slides_control .slide:eq('+ current +')'); 
        				
        				var slideHeight = nextSlide.height();
        				var height = slideHeight;
        				//var contentHeight = 0;                
        				                    
        				var changeHeight = function( contentHeight, slideHeight ) {
                            if ( contentHeight > slideHeight )
        				       nextSlide.height( contentHeight );
        				}      
        				
        				if ( $('.featured-image', nextSlide).length > 0 ) {
        				   
        				    var newImg = new Image();
        				    var height;
        
                            newImg.onload = function() {
                                if ( newImg.width > 500 )
                                    height = ( 500 * newImg.height ) / newImg.width;
                                else
                                    height = newImg.height;
                                                            
                                changeHeight( height, slideHeight );
                            }
                            
                            newImg.src = $('.featured-image img', nextSlide).attr('src'); // this must be done AFTER setting onload
        				   
        				} else if ( $('.video-container', nextSlide).length > 0 ) {
        				    var height = $('.video-container', nextSlide).height();
        				    changeHeight( height, slideHeight );
        				}
                    };
            		
            		$("#slider.cycle").slides({  
            			play: slider_cycle_timeout,
            			width: 960,
            			effect: slider_cycle_fx,
            			generatePagination: false,
            			slideSpeed: slider_cycle_speed,
            			fadeSpeed: slider_cycle_speed,
            			autoHeight: true,      
                        slidesLoaded: function () { 
                            adjust_height(0);
                        },           
                        animationStart: adjust_height,     
            			generateNextPrev: true
            		});	 
                </script>
                <!-- END #slider -->    
                                          
                <!-- START CONTENT -->
                <div id="content" class="gradient layout-sidebar-right group"> 
                    
                    <!-- START SLOGAN -->
                    <div id="slogan" class="inner">
                        <h1>DIVERSO. MAKE IT YOURSELF.</h1>
                        <h3>custom post types, widgets, home composer: <span>make your site</span></h3>
                    </div>
                    <!-- END SLOGAN -->
                    
                    <!-- START PRIMARY -->
                    <div id="primary" class="hentry group wrapper-content" role="main">
                    
                        <p>
                            Sed nec risus ut lectus pretium dapibus ullamcorper vel justo. 
                            Integer sit amet lorem mauris. <a href="#">Vestibulum ante ipsum</a> primis 
                            in faucibus orci luctus et ultrices posuere cubilia Curae;
                        </p>
                        
                        <p>
                            Pellentesque justo nulla, fringilla ac consequat in, tempor in turpis. 
                            In ut velit nulla. Maecenas sed felis est, sed auctor lectus. <strong>Sed 
                            est magna, dapibus non</strong> venenatis eu, aliquam eu enim. Donec ut ipsum 
                            interdum augue faucibus pretium ut nec orci. Aliquam erat volutpat. Aliquam 
                            quam est, posuere mollis convallis at, sollicitudin rutrum ipsum. Suspendisse 
                            quis mi quam.
                        </p>
                        
                        <p>Donec nulla turpis, gravida sit amet vulputate ut, sodales id lacus.</p>
                        <p>&nbsp;</p>
                    </div>
                    <!-- END PRIMARY -->
                    
                    <!-- START SIDEBAR -->
                    <div id="sidebar" class="group">
                    
                        <div class="widget-first widget icon-text group">
                            <img src="images/icons/widget/call.png" alt="" />
                            <h3>Call us</h3>
                            <p>phone to our staff: + 39 095 7683</p>
                        </div>
                        
                        <div class="widget icon-text group">
                            <img src="images/icons/widget/email.png" alt="" />
                            <h3>Send us a message</h3>
                            <p>using the contact form  
                                <a href="contact.html">here</a>
                            </p>
                        </div>
                        
                        <div class="widget-last widget icon-text group">
                            <img src="images/icons/widget/smile.png" alt="" />
                            <h3>We will help you</h3>
                            <p>we will find a great solution for you.</p>
                        </div>
                        
                    </div>
                    <!-- END SIDEBAR -->   
                    
                </div>
                <!-- END CONTENT -->
        

                <!-- START TWITTER -->
                <div id="twitter-slider" class="group">
                    <div class="tweets-list"></div>
                    <div class="bird"></div>
                </div>
                <!-- END TWITTER -->   
                
                <!-- START FOOTER -->
                <div id="footer" class="group columns-4"><!-- here you can change the number of columns -->
                    <div class="inner footer-main">
                        
                        <!-- START WIDGET -->
                        <div class="widget-first widget widget_text">
                            <h3>COMPANY</h3>
                            <p>
                                Di'verso is a new WordPress all in one, clean & modern In in 
                                odio ut lectus posuere consequat in nec ipsum. Proin pretium 
                                ullamcorper lectus non feugiat. 
                            </p>
                        </div>            
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget widget_flickrRSS">
                            <h3>PHOTOSTREAMING</h3>
                            <a href="http://www.flickr.com/photos/sunny660201/6875279379/" title="DSC02227"><img src="http://farm8.staticflickr.com/7206/6875279379_c4a025d262_s.jpg" alt="DSC02227" /></a>
                            <a href="http://www.flickr.com/photos/54104175@N04/6875279427/" title="IMG_0825"><img src="http://farm8.staticflickr.com/7066/6875279427_63f7c56731_s.jpg" alt="IMG_0825" /></a>
                            <a href="http://www.flickr.com/photos/315521/6875279443/" title="DSC_0161"><img src="http://farm8.staticflickr.com/7203/6875279443_2f76d251d3_s.jpg" alt="DSC_0161" /></a>
                            <a href="http://www.flickr.com/photos/lwvtp/6875279463/" title="P1030647"><img src="http://farm8.staticflickr.com/7183/6875279463_0942d0fc57_s.jpg" alt="P1030647" /></a>
                            <a href="http://www.flickr.com/photos/71108778@N04/6875279477/" title="RIMG0093"><img src="http://farm8.staticflickr.com/7199/6875279477_872f15c182_s.jpg" alt="RIMG0093" /></a>
                            <a href="http://www.flickr.com/photos/shacho/6875279483/" title="IMG_0163"><img src="http://farm8.staticflickr.com/7180/6875279483_7cd6edf66f_s.jpg" alt="IMG_0163" /></a>
                        </div>              
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget recent-posts">
                            <h3>RECENT POSTS</h3>
                            <div class="last-news group">
                                <div class="box-post group">
                                    <div class="box-post-body group">
                                        <div class="news_title">
                                            <a href="#" title="A fresh and nice blog layout: do u like it?" class="title">A fresh and nice blog layout: do u like it?</a>
                                        </div>
                                        <p class="meta"><span class="date">December 13, 2011</span></p>
                                    </div>
                                </div>
                                <div class="box-post group">
                                    <div class="box-post-body group">
                                        <div class="news_title">
                                            <a href="#" title="50% off on our products for the month of August" class="title">50% off on our products for the month of August</a>
                                        </div>
                                        <p class="meta"><span class="date">December 7, 2011</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>     
                        <!-- END WIDGET -->
                                    
                        <!-- START WIDGET -->
                        <div class="widget-last widget widget_nav_menu">
                            <h3>MENU</h3>
                            <ul class="menu">
                                <li><a href="about.html">About Di&#8217;verso</a></li>
                                <li><a href="contact.html">Contact Di&#8217;verso</a></li>
                                <li><a href="shortcodes.html">Shortcodes</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="http://www.yourinspirationweb.com/en">Your Inspiration Web</a></li>
                            </ul>
                        </div>    
                        <!-- END WIDGET -->
                                  
                    </div>
                </div>
                <!-- END FOOTER -->
                           
                <!-- START COPYRIGHT -->
                <div id="copyright" class="group two-columns">
                    <div class="inner group">
                        <p class="left">Copyright <a href="#"><strong>Diverso</strong></a> 2010 - Powered by <a href="http://www.yourinspirationweb.com/en"><strong>Your Inspiration Web</strong></a></p>
                        <p class="right">
                            <a href="#" class="socials facebook" title="Facebook">facebook</a>
                            <a href="#" class="socials rss" title="Rss">rss</a>
                            <a href="#" class="socials flickr" title="Flickr">flickr</a>
                            <a href="#" class="socials youtube" title="Youtube">youtube</a>
                            <a href="#" class="socials twitter" title="Twitter">twitter</a>
                            <a href="#" class="socials linkedin" title="Linkedin">linkedin</a>
                            <a href="#" class="socials mail" title="Mail">mail</a>
                            <a href="#" class="socials skype" title="Skype">skype</a>
                        </p>
                    </div>
                    
                </div>
                <!-- END COPYRIGHT -->  
                   
            </div>
            <!-- END WRAPPER --> 
            	    
        </div>
        <!-- END SHADOW -->       
        
    </body>
</html>